<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.personName" clearable></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="searchForm.deptId" clearable>
          <el-option v-for="(v,i) in topDeptList" :key="i" :label="v.label" :value="v.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getPersonsList">查询</el-button>
      </el-form-item>

    </el-form>
    <el-table :data="tableData">
      <el-table-column prop="personCode" label="编号" width="80"></el-table-column>
      <el-table-column prop="personName" label="姓名" width="80">
      </el-table-column>
      <el-table-column width="80" prop="sex" label="性别">
        <template slot-scope="scope">
          {{ scope.row.sex|formatSex }}
        </template>
      </el-table-column>
      <el-table-column prop="roles" label="角色">
        <template slot-scope="scope">
          <span v-if="scope.row.sysRole">{{ scope.row.sysRole.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deptName" label="所在部门">
      </el-table-column>
      <el-table-column prop="post" label="岗位" ></el-table-column>
      <el-table-column prop="job" label="职务"></el-table-column>
      <el-table-column width="120" prop="telephone" label="手机号"></el-table-column>
      <el-table-column width="200" prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
              @click="toEditRole(scope.row)"
              type="primary"
              size="small"
          >授权
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </div>


    <el-dialog
        title="编辑权限"
        :visible.sync="dialogVisible"
        width="1000px"
        class="top_dialog"
    >
      <div style="margin-bottom: 25px">角色列表</div>
      <el-form label-position="left" ref="ruleForm">
        <el-form-item>
          <el-radio-group v-model="roleSelect">
            <el-radio v-for="(v,i) in roles" :key="i" :label="v.roleId" style="margin-bottom: 25px">
              {{ v.roleName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editRole('ruleForm')"
        >保 存
        </el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crumbs from "../../views/Crumbs.vue";

export default {
  name: "useraccess",
  components: {
    crumbs
  },
  data() {
    return {
      BreadCrumb: [
        {path: "", name: "系统设置"},
        {path: "/system/useraccess", name: "授权管理"},
      ],
      topDeptList:[],
      formLabelWidth: "80px",
      searchForm: {},
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      roles: [],
      userId:null,
      roleSelect: ''
    }
  },
  filters:{
    formatSex: function (val) {
      var dict = {1: "男", 2: "女"}
      return dict[val]
    },
  },
  methods: {
    getDepartmentList() {
      let that = this;
      this.$axios.getDepartTreeList({}).then((res) => {
        if (res.code == "00000") {
          that.departmentList = res.data;
          if (this.navId === 0) {
            this.navId = res.data[0].id
          }
          this.doGetList({parentId: this.navId,})
          that.topDeptList = [res.data[0]]
          that.topDeptList = that.topDeptList.concat(res.data[0].children)
        }
      });
    },
    getquerySysRoleList() {
      this.$axios.getquerySysRoleList({
        pageSize: 99999,
        pageNo: 1,
        roleName: ""
      }).then(res => {
        if (res.code === '00000') {
          this.roles = res.data.records
          console.log(this.roles)
        }
      })
    },

    getPersonsList() {
      const req = {personName: this.searchForm.personName}
      if(this.searchForm.deptId){
        req.deptIds = [this.searchForm.deptId]
      }
      this.doGetList(req)
    },
    doGetList(req) {
      // todo 此处调用api待确认
      this.$axios.queryPbPersonsList(req).then((res) => {
        if (res.code === "00000") {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val
      const req = {
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      }
      this.doGetList(req)
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      const req = {
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      }
      this.doGetList(req)
    },
    toEditRole(row) {
      if(!row.sysRole){
        this.$message.error("未创建登录账号，不能授权")
      }
      this.dialogVisible = true
      this.userId = row.sysUser.userId
      // 赋值
      this.roleSelect = []
    },
    editRole(row) {
      // 提交保存
      this.$axios.addUserRole({
        "userId":this.userId,
        "roleId":this.roleSelect
      }).then((res) => {
        if (res.code === "00000") {
          this.$message.success("提交成功")
          this.dialogVisible = false
          this.getPersonsList()
        }
      });
    }
  },
  created() {
    this.getquerySysRoleList()
    this.getPersonsList()
    this.getDepartmentList()
  }
}
</script>

<style scoped>

</style>
